<template>
	<view class="center">
		<!-- 地址 -->
		<view class="address_wrap">
			<view class="address_icon">
				<image src="@/static/order/location.png" mode="aspectFill"></image>
			</view>

			<view class="ar_cent" v-if="checkOAddress !=undefined && checkOAddress.id" @click="getAddress">
				<view class="ar_cent_tit">
					{{checkOAddress.area}}{{checkOAddress.detail}}
				</view>
				<view class="ar_cent_desc">
					<text>{{checkOAddress.contacts}}</text> <text
						style="margin-left: 24rpx;">{{checkOAddress.phone}}</text>
				</view>
			</view>

			<view class="ar_cent" v-else @click="getAddress">
				<view class="ar_cent_desc">
					请先添加收货地址
				</view>
			</view>
			<view class="arrow_icon">
				<image src="@/static/order/arrow_right.png" mode="aspectFill"></image>
			</view>
		</view>

		<!-- 商品 -->
		<view class="goods_wrap">
			<view class="gd_header">
				<view class="gd_header_img">
					<image src="@/static/home/cart3.png" mode="aspectFill" class="acrt_icon"></image>
				</view>
				<view class="gd_header_name">
					{{goodsForm.storeName}}
				</view>
			</view>

			<view class="gd_cent">
				<view class="gd_item" v-for="(item,index) in goodsForm.goodsList" :key="index">

					<view class="gd_item_img">
						<image :src="item.PhotosImg" mode="aspectFill" class="">
						</image>
					</view>
					<view class="gd_item_cent">
						<view class="gd_item_tit">
							{{item.goodsName}}
						</view>

						<view class="gd_item_wrap">
							<view class="gd_item_num">
								<span style="font-size: 20rpx;">X</span> {{item.count}}
							</view>

							<view class="gd_item_num">
								<!-- ￥{{item.price}} -->
								<cn-money :money="item.price/100" :size="36" color="#000"></cn-money>
							</view>
						</view>
					</view>
				</view>

				<!-- <view class="freight_wrap">
					<view class="fw_tit">
						配送费
					</view>
					<view class="fw_price">
						￥0
					</view>
				</view> -->

				<view class="divider">
				</view>

				<view class="total_wrap">
					<view class="fw_tit">
						合计
					</view>
					<view class="fw_price">
						<cn-money :money="goodsForm.totalPrice/100" :size="40" color="#FE2C55"></cn-money>
					</view>
				</view>
			</view>
		</view>

		<!-- 支付方式 -->
		<view class="Payment_wrap">
			<view class="Pw_header">
				支付方式
			</view>

			<view class="Pw_cent">
				<radio-group @change="radioChange">
					<view class="" v-for="(item, index) in items" :key="item.value">
						<view class="radeio-wrap">
							<view class="radeio-wrap-fz">
								<view class="icon">
									<image v-if="index==0" src="../../static/order/zfb.png" mode="aspectFill"
										class="zf_icon"></image>

									<image v-if="index==1" src="../../static/order/wx.png" mode="aspectFill"
										class="zf_icon"></image>
								</view>
								<view class="icon_title">
									{{item.name}}
								</view>
							</view>
							<view>
								<!-- :value -->
								<radio activeBackgroundColor="red" v-model="item.value"
									:checked="item.value === current" />
							</view>
						</view>
					</view>
				</radio-group>

			</view>
		</view>


		<button class="btn_Payment" :loading="submit_logding" hover-class="none" :disabled="submit_logding"
			@click="onSubmit">立即付款</button>

		<!-- 商品过期 待封装 -->
		<!-- 	<uni-popup ref="expire1" @change="onExpireChange">
			<view class="EP-wrap">
				<view class="ep-title">
					所选商品含有已下架商品 请重新选择商品
				</view>

				<view class="ep-img">
					<image src="@/static/home/cart-empty1.png" mode="widthFix" class="wrap-sty"></image>
				</view>

				<view class="EP-btn" @click="onRemove">
					确定
				</view>
			</view>
		</uni-popup> -->

		<!-- 商品下架提醒 -->
		<OffShelf ref="OffShelf"></OffShelf>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		removeCart,
		orderSubmit,
		payAppSubmit
	} from "@/api/apis.js"

	import {
		allAddress,
	} from '../../api/apia';
	import {
		toSLetter
	} from "@/utils/common.js"


	// import Alipay from "@/mixin/Alipay.js"
	import {
		fetchData
	} from "@/utils/allPay.js"
	export default {
		// mixins: [Alipay],
		data() {
			return {
				status: 2, //无收货地址
				items: [{
						value: '2',
						name: '支付宝',
						checked: 'true'
					},
					// {
					// 	value: '1',
					// 	name: '微信'
					// },
				],
				current: '2',
				submit_logding: false,
				addressList: [],


			};
		},
		computed: {
			...mapState("userInfo", ["Info", 'storeId', 'checkOAddress', 'goodsForm']),
		},


		onShow() {
			// 页面打开。如果有选中地址。先拿选中地址，没有取默认地址
			// console.log(this.checkOAddress);
			if (this.checkOAddress) {
				if (!this.checkOAddress.id) {
					this.getAllAddress()
				}
			}

		},

		mounted() {
			// 判断首次进入预订单页，有没有下架商品
			// console.log(this.goodsForm);
			if (this.goodsForm.isSelect) {
				// this.onExpireChange()
				this.$refs.OffShelf.onExpireChange()
			}
		},


		methods: {
			...mapMutations("userInfo", ["setToken", 'setUserInfo', 'setStoreId', 'setCAddress']),


			// 获取地址列表
			getAllAddress() {
				allAddress(this.Info.id).then(res => {
					this.addressList = res.result
					let item = this.addressList.filter(item => {
						return item.isDefault == 1
					})
					if (item.length > 0) {
						this.setCAddress(item[0])
					} else {
						this.setCAddress(this.addressList[0])
					}
				})
			},

			// 跳转到地址
			getAddress() {
				let status = 1 //跳转地址
				uni.navigateTo({
					url: `/pages/address/address?status=${status}`
				})
			},

			onGroupChange(e) {
				console.log(e)
			},

			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
				this.current = evt.detail.value
			},

			// 创建订单。支付
			onSubmit() {
				if (this.checkOAddress == undefined || !this.checkOAddress.id) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none',
						duration: 1000, //提示的延迟时间，单位毫秒，默认：1500
						mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
						// image:'./image.png',//自定义图标的本地路径
					});
					return
				}
				this.submit_logding = true;
				//创建订单
				let goodsIds = this.goodsForm.goodsList.map(item => item.goodsId)
				// console.log(goodsIds);
				let params = {
					addressId: this.checkOAddress.id, //地址id
					customerId: this.Info.id, //用户Id
					payType: this.current, //支付方式 1微信,2支付宝,3余额
					storeId: this.storeId + '', //店铺id
					goodsIds,
				}
				params.storeType = this.storeId == 1 ? 1 : 0 //店铺类型: 0、普通店铺，1、自营店铺"
				orderSubmit(params).then(async res => {
					console.log(res);
					let payApp = {
						"orderNo": res.result.orderNo,
						"payType": this.current
					}
					// 支付宝
					if (this.current == 2) {
						const response = await fetchData(payApp, this.current)
						if (response.code == 10060) {
							this.$refs.OffShelf.onExpireChange()
						} else {
							if (response.errCode) {
								uni.showToast({
									title: response.message || '支付失败',
									icon: 'none',
									duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
									mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
								});
								this.onPFailThen(res.result.id)
							}
						}

						// 支付成功跳转
						if (response.errMsg == "requestPayment:ok") {
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
								mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							});
							console.log(response);
							this.onPSuccessThen(res.result.id)
						}

					} else {
						const response = await fetchData(payApp, this.current)
						if (response.code == 10060) {
							this.$refs.OffShelf.onExpireChange()
						} else {
							if (response.errCode) {
								uni.showToast({
									title: response.message || '支付失败',
									icon: 'none',
									duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
									mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
									// image:'./image.png',//自定义图标的本地路径
								});
								this.onPFailThen(res.result.id)
							}
						}

						if (response.channel.serviceReady) {
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
								mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
								// image:'./image.png',//自定义图标的本地路径
							});
							this.onPSuccessThen(res.result.id)
						}
					}
				}).finally(() => {
					this.submit_logding = false
				})
			},


			async onGetData() {
				let payApp = {
					id: 1
				}
				const response = await fetchData(payApp)
				console.log(response);
			},

			// 支付成功，后续回调
			onPSuccessThen(id) {
				setTimeout(() => {
					uni.redirectTo({
						// url: "/pages/orders/orders"
						url: '/pages/allorderspage/allorderspage?id=' + id
					})
				}, 2000)
			},

			// 支付失败回调
			onPFailThen(id) {
				setTimeout(() => {
					uni.redirectTo({
						url: `/pages/allorderspage/allorderspage?id=${id}`
					})
				}, 2000)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.center {
		height: 100%;
		width: 100%;
		background: #F7F7F7;
		box-sizing: border-box;
		padding: 16rpx 32rpx;

		// 地址
		.address_wrap {
			box-sizing: border-box;
			width: 686rpx;
			// height: 148rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx;
			display: flex;

			.address_icon {
				flex: 1;

				>image {
					height: 40rpx;
					width: 40rpx;
				}
			}

			.arrow_icon {
				flex: 1;
				display: flex;
				align-items: center;

				>image {
					height: 40rpx;
					width: 40rpx;
				}
			}

			.ar_cent {
				flex: 10;

				.ar_cent_tit {
					font-weight: 600;
					font-size: 28rpx;
					color: #313131;
				}

				.ar_cent_desc {
					margin-top: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #7F7F7F;
				}
			}
		}

		// 商品
		.goods_wrap {
			margin-top: 16rpx;
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			box-sizing: border-box;
			padding: 24rpx 32rpx 32rpx 32rpx;

			.acrt_icon {
				width: 24rpx;
				height: 24rpx;
			}

			.gd_header {
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;

				.gd_header_name {
					margin-left: 8rpx;
				}
			}

			.gd_cent {
				.gd_item {
					display: flex;
					margin-bottom: 32rpx;

					.gd_item_img {
						>image {
							width: 112rpx;
							height: 112rpx;
							border-radius: 8rpx;
						}
					}

					.gd_item_cent {
						flex: 1;

						margin-left: 20rpx;
						display: flex;
						flex-direction: column; //合并金额
						justify-content: space-around;

						.gd_item_tit {
							font-weight: 400;
							font-size: 28rpx;
							color: #262626;
						}

						.gd_item_wrap {
							display: flex;
							justify-content: space-between;
						}
					}


				}

				.freight_wrap {
					display: flex;
					justify-content: space-between;

					.fw_tit {
						font-weight: 400;
						font-size: 28rpx;
						color: #262626;
					}

					.fw_price {
						font-weight: 500;
						font-size: 28rpx;
						color: #262626;
					}
				}

				.divider {
					margin-top: 32rpx;
					width: 622rpx;
					height: 2rpx;
					background: #F2F2F2;
				}

				.total_wrap {
					margin-top: 34rpx;
					display: flex;
					justify-content: space-between;

					.fw_tit {
						font-weight: 500;
						font-size: 28rpx;
						color: #262626;
					}

					.fw_price {}
				}

			}
		}

		// 支付方式
		.Payment_wrap {
			padding: 24rpx 32rpx 32rpx 32rpx;
			margin-top: 16rpx;
			width: 686rpx;
			// height: 252rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

			.Pw_header {
				font-weight: 400;
				font-size: 24rpx;
				color: #8C8EA0;
			}

			.Pw_cent {
				>uni-radio-group {
					width: 100%;
				}

				.radeio-wrap {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.radeio-wrap-fz {
						margin-top: 32rpx;
						display: flex;

						.icon {
							.zf_icon {
								width: 48rpx;
								height: 48rpx;
							}
						}

						.icon_title {
							margin-left: 24rpx;
						}
					}


				}
			}
		}

		// 提交按钮
		.btn_Payment {
			margin-top: 16rpx;
			width: 686rpx;
			height: 98rpx;
			background: $uni-color-theme;
			border-radius: 36rpx;
			margin-top: 106rpx;

			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	// 包含下架商品
	.EP-wrap {
		margin: 0 auto;
		width: 578rpx;
		height: 696rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		text-align: center;

		.ep-title {
			margin: 0 auto;
			margin-top: 300rpx;
			padding-top: 60rpx;
			width: 440rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 40rpx;
			color: #262626;
			line-height: 56rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.ep-img {
			margin-top: 80rpx;

			image {
				width: 240rpx;
				height: 240rpx;
				;
			}
		}

		.EP-btn {
			margin: 0 auto;
			margin-top: 80rpx;
			width: 498rpx;
			height: 84rpx;
			background: $uni-color-theme;
			border-radius: 16rpx;
			font-size: 32rpx;
			display: flex;
			color: #fff;
			justify-content: center;
			align-items: center;
		}
	}
</style>